<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :search-path="searchPath"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import SearchDatePicker from '@/components/SearchDatePicker'
import { queryBatchList, deleteBatch, exportBatchExcel } from '@/api/timeCard'
import formatter from '@/utils/format'
export default {
  name: 'BatchList',
  components: { TableSearch, SearchDatePicker },
  data() {
    return {
      form: {
        batchNum: '',
        endTime: null,
        startTime: null,
      },
      searchPath: '/web/timecard-management/batch/查询',
      tableBtns: [
        {
          label: '新增',
          click: this.handleAdd,
          icon: 'el-icon-plus',
          resourceId: '/web/timecard-management/batch/新增',
        },
      ],
      formItemsInline: [
        {
          type: 'text',
          value: 'batchNum',
          placeholder: '请输入批次号',
          clearable: true,
          resourceId: '/web/timecard-management/batch/批次',
        },
        {
          slot: 'date',
        },
      ],
      columns: [
        {
          label: '批次',
          prop: 'batchNum',
          resourceId: '/web/timecard-management/batch/批次',
        },
        {
          label: '地区',
          prop: 'nationName',
          resourceId: '/web/timecard-management/batch/地区',
        },
        {
          label: '添加时间',
          prop: 'createTime',
          formatter,
          resourceId: '/web/timecard-management/batch/添加时间',
        },
        {
          label: '生成张数',
          prop: 'integralNum',
          resourceId: '/web/timecard-management/batch/生成张数',
        },
        {
          label: '现有张数',
          prop: 'restNum',
          resourceId: '/web/timecard-management/batch/现有张数',
        },
        {
          label: '操作',
          resourceId: '/web/timecard-management/batch/操作',
          buttons: [
            {
              label: '导出',
              size: 'small',
              isExport: true,
              inTable: true,
              startDownload: (callback, row) => {
                exportBatchExcel({
                  batchNum: row.batchNum,
                })
                  .then((res) => {
                    callback(res)
                  })
                  .catch((err) => {
                    console.log(err)
                    callback()
                  })
              },
              resourceId: '/web/timecard-management/batch/导出',
            },
            {
              label: '详情',
              class: 'table-button-green',
              size: 'small',
              click: this.handleDetail,
              resourceId: '/web/timecard-management/batch/详情',
            },
            {
              label: '删除',
              size: 'small',
              click: this.handleDelete,
              resourceId: '/web/timecard-management/batch/删除',
              // ifRender: (row) => {
              //   return row.updatable
              // },
            },
          ],
        },
      ],
      tableData: {},
    }
  },
  mounted() {},
  methods: {
    reset() {
      this.form = {
        batchNum: '',
        endTime: null,
        startTime: null,
      }
    },
    handleTableData(params) {
      queryBatchList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
    refreshTable() {
      this.$refs['tableSearch'].refreshTable()
    },
    handleAdd() {
      this.$router.push('/timeCard/batchAdd')
    },
    handleDetail(val) {
      this.$router.push(`/timeCard/timeCardList/?batchNum=${val.batchNum}`)
    },
    handleExport(val) {
      console.log(val)
    },
    handleDelete(val) {
      this.$confirm(
        '您确定要删除批次号为' + val.batchNum + '的批次吗?',
        '提示',
        {
          center: true,
          customClass: 'tip-dialog__wrapper',
        }
      )
        .then(() => {
          deleteBatch({ batchNum: val.batchNum }).then(() => {
            this.$message({
              type: 'success',
              showClose: true,
              message: '操作成功',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
  },
}
</script>
